import React from 'react'
import { Button, message, Form, Input, Upload } from 'antd';
import { useEffect } from 'react';
import { eventBus } from '../utils/eventBus';
import { uploadMsg } from '../apis/user';
export default function Mine() {
    // 获取本地信息
    const userInfo = JSON.parse(localStorage.userInfo)
    // 转圈
    const [Loading, setLoading] = React.useState(false)
    const [fileList, setFileList] = React.useState([{ thumbUrl: "http://jacklv.cn/images/" + userInfo.imgUrl }])

    // 上传头像
    const normFile = (e) => {
        if (Array.isArray(e)) {
            return e;
        }
        setFileList(e.fileList)
        return e?.fileList;
    };
    // 提交
    const onFinish = async (values) => {
        console.log('success', values);
        const { account, userGroup } = values
        const params = {
            account,
            role: userGroup,
            imgUrl: ''
        }
        // 如果是新上传的头像，就会有response
        const response = values.upload[0].response
        console.log('response',response);
        // 新上传头像的情况
        if (response) {
            if (response.code != 1) {
                message.error('上传头像出错')
            } else {
                params.imgUrl = response.data
            }
        } else {
            // 未修改头像的情况
            params.imgUrl = values.upload[0].uid
        }
        await uploadMsg(params)
        const userInfo={
            account,
            role:userGroup,
            imgUrl:params.imgUrl,
        }
        localStorage.userInfo=JSON.stringify(userInfo)
        eventBus.emit('syncAvatar')
        message.success('修改信息成功')
    }
    // 提交失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div style={{ height: '100vh', width: '100vw' }}>
            <Form
                className='Login'
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    width: 600,
                }}
                initialValues={{
                    account: userInfo.account,
                    userGroup: userInfo.role,
                    upload: [{ thumbUrl: "http://jacklv.cn/images/" + userInfo.imgUrl,uid:userInfo.imgUrl }]
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >

                <Form.Item
                    label={<div>用户名</div>}
                    name="account"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label={<div >角色</div>}
                    name="userGroup"

                >
                    <Input disabled />
                </Form.Item>
                <Form.Item
                    name='upload'
                    label="上传头像"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    rules={[
                        {
                            required: true,
                            message: '请选择头像!',
                        },
                    ]}>
                    <Upload
                        name='avatar'
                        action="http://jacklv.cn/users/uploadProfile"
                        headers={{
                            token: localStorage.token
                        }}
                        listType="picture-card">
                        {fileList.length == 0 ? '选择头像' : ''}
                    </Upload>
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button loading={Loading} type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
